<template>
  <div class="page-list-live">
    <PageList>
      <template #header>报警设置</template>
      <template #tab>
        <el-form ref="RefForm" :model="formData" label-width="160px" :rules="formRules" status-icon>
          <el-form-item v-for="item in tableData" :key="item.id" :label="item.name + '限制人数'">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input :value="item.value" disabled></el-input>
              </div>
              <div class="fonts">注：请在 工点信息维护-区域管理中修改限制人数</div>
            </div>
          </el-form-item>
          <el-form-item label="超时报警(分)" prop="limitationHours">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.limitationHours"></el-input>
              </div>
              <div class="fonts">注：设置时间应小于最大停留时间，当前最大停留时间是 {{ effectiveTime ? effectiveTime : '1' }} 分</div>
            </div>
          </el-form-item>
          <el-form-item label="发送报警信息间隔(分)" prop="ignoreAlertMessageMinutes">
            <div class="tdDiv">
              <div class="inputDiv">
                <el-input v-model="formData.ignoreAlertMessageMinutes" disabled></el-input>
              </div>
              <div class="fonts">注：发送报警信息间隔,默认5分钟</div>
            </div>
          </el-form-item>
          <el-form-item></el-form-item>
          <el-form-item>
            <el-button :loading="loading" type="primary" @click="handleSubmit">保存</el-button>
          </el-form-item>
        </el-form>
      </template>
    </PageList>
  </div>
</template>
<script>
  import listMixin from '@/mixins/list'
  import { warningSetting, area, attendance } from '@/api/api'
  import { eleValidator } from '@/utils/tools'
  export default {
    mixins: [listMixin],
    data() {
      return {
        loading: false,
        formData: {
          limitationHours: '', // 有效进出时间频率间隔
          ignoreAlertMessageMinutes: 5
        },
        formRules: {
          limitationHours: [
            { required: true, message: '请设置超出时间', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isIp', msg: '只能输入数字' },
                { rule: 'isEmpty', msg: '超出时间不能为空' }
              ]),
              trigger: 'blur'
            }
          ],
          ignoreAlertMessageMinutes: [
            { required: true, message: '请输入有效时间', trigger: 'blur' },
            {
              validator: eleValidator([
                { rule: 'isEmpty', msg: '有效时间不能为空' },
                { rule: 'isNumber', msg: '只能输入数字' }
              ]),
              trigger: 'blur'
            }
          ]
        },
        tableData: [],
        id: null,
        // 是否有默认数据
        isDefault: false,
        // 当前有效停留时间
        effectiveTime: ''
      }
    },
    mounted() {
      this.getList()
      this.getData()
      this.getSystemData()
    },
    methods: {
      // 保存
      async handleSubmit() {
        this.loading = true
        let response = null
        try {
          if (this.isDefault) {
            response = await warningSetting('put', { id: this.id, value: this.formData })
          } else {
            response = await warningSetting('post', this.formData)
            this.getData()
          }
          this.$message.success('保存成功！')
          this.getList()
          this.getData()
        } catch (err) {
          this.$message.error('保存失败！')
        }
        this.loading = false
      },
      // 查询区域列表
      async getList() {
        try {
          let obj = { pageIndex: 1, pageSize: 1e8 }
          let {
            data: { items }
          } = await area('post', obj, false)
          this.tableData = []
          this.tableData = items.map(item => {
            return {
              name: item.name,
              value: item.limitation,
              id: item.id
            }
          })
        } catch (err) {
          this.tableData = []
        }
      },
      // 查询
      async getData() {
        try {
          let response = await warningSetting('get', null)
          let data = response.data
          this.isDefault = true
          this.id = data.id
          this.formData = {
            limitationHours: data.limitationHours, // 有效进出时间频率间隔
            ignoreAlertMessageMinutes: data.ignoreAlertMessageMinutes
          }
        } catch (err) {
          this.isDefault = false
        }
      },
      // 有效停留时间
      async getSystemData() {
        try {
          let response = await attendance('get', null)
          this.effectiveTime = response.data.validStayMinutes // 有效时间
        } catch (err) {
          this.$message.error('有效停留时间查询失败！')
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .el-input {
    width: 200px;
  }
  .tdDiv {
    display: flex;
    .inputDiv {
      width: 200px;
    }
    .fonts {
      color: #999;
      flex: 1;
      line-height: 20px;
      margin-left: 10px;
      font-size: 12px;
      display: flex;
      align-items: center;
    }
  }
</style>
